<template>
	<view class="near">




		<!-- <u-navbar id="tabbars" :is-back="true" :border-bottom="false" back-icon-color="#fff" title="微信授权"
			title-size="36" title-color="#fff" :background="background">
			
			
		</u-navbar> -->
		<view :style="{'top': totalHeight+'px'}" class="decoration">
			<image class="imgs" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c4.png" mode=""></image>
		</view>

		<view class="content">
			<image class="img1" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c3.png" mode=""></image>
			<view class="tit">
				欢迎登录益生氧
			</view>
			<view class="desc">
				为了给您提供氧气瓶租借服务，请您使用手机号快速登录
			</view>
			
			<view v-if="handle" class="">
				<view @click="logins" class="img2">
					<text>手机号快速登录</text>
				</view>
			</view>

			<view v-else class="handles">
				<view v-if="flag" class="btns">
					<button class="button" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">手机号快速登录</button>
						<view class="img22">
							<text>手机号快速登录</text>
						</view>
					<!-- <image class="img22" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c5.png" mode=""></image> -->
				</view>
				
				
				<view v-else @click="Fnhandle" class="img2">
					<text>手机号快速登录</text>
				</view>
				
				
				
				<!-- <image @click="handle" v-else class="img2" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c5.png"
					mode=""></image> -->
			</view>
		</view>
		
		<view @click="notLogin" class="botTips">
			暂不登录
		</view>
		

		<view class="foot">
			
			<u-checkbox shape="circle" v-model="flag" >我已阅读并了解</u-checkbox> <text @click="goxy('/pages/common/webview?url=https://admin.yishengyang.cn/html/yszc.html&name=隐私政策')">“益生氧”隐私条款及用户协议</text>
			
			<!-- <image @click="flag=!flag" v-if="flag" class="img3"
				src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/b5.png" mode=""></image>
			<image @click="flag=!flag" v-else class="img3"
				src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/b4.png" mode=""></image>

			我已阅读并了解 
			
			<text
				@click="goxy('/pages/common/webview?url=https://admin.yishengyang.cn/html/yszc.html&name=隐私政策')">“益生氧”隐私条款及用户协议</text> -->
		</view>
		
		
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<privacy-popup ref="PrivacyPopck"></privacy-popup>
		<!-- #endif -->
		


	</view>
</template>

<script>
	// 小程序隐私协议
	import PrivacyPopup from "@/components/xw-privacy-popup/privacy-popup.vue"
	export default {
		components: {
			PrivacyPopup
		},

		data() {
			return {
				handle:false,
				jsonObject: {},
				code: "",
				tell:"",
				flag: false,
				totalHeight: 0, //总高度    
				qqshow: false,
				qqshow1: false,
				takeMoneyShow: true,
				background: {
					background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/9.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(180deg, #417CF4 0%, #84ACFF 100%)'
				}
			}
		},

		onReady() {
			uni.hideTabBar();
			uni.createSelectorQuery().select('#tabbars').boundingClientRect((rect) => {
				console.log(rect.height)
				this.totalHeight = rect.height
			}).exec()
		},
		onLoad() {
			this.$refs.PrivacyPopck.checkPrivacySetting();
			let that = this
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.$u.api
						.jscode2session({
							appid: 'wxc3c74c17168f844a',
							code: loginRes.code
						})
						.then((res) => {
							that.jsonObject = res.jsonObject
							console.log(res.jsonObject, 434343);
							
							if(res.jsonObject.phoneNumber){
								that.handle = true
							}
						});
				}
			});

		},
		methods: {
			notLogin(){
				uni.navigateBack()
				// uni.reLaunch({
				// 	url:"/pages/sys/main/index"
				// })
			},
			goxy(url){
				uni.navigateTo({
					url
				})
				
			},
			logins(){
				if(this.flag){
					this.login()
				}else{
					this.Fnhandle()
				}
			},

			Fnhandle() {
				uni.showToast({
					title: '请选阅读并了解“益生氧”隐私条款及用户协议',
					icon: 'none'
				});
			},
			
			login(){
				this.$u.api.miniLogin({
						openid: this.jsonObject.openid,
						phoneNumber: this.tell,
						fromMbId:'',
						nickname:"",
						avatar:""
					})
					.then((res) => {
						console.log(res,55555555555);
						this.$u.vuex("vuex_token", res.token);
						this.$u.vuex("vuex_user", res.member);
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/sys/main/index"
							})
							
						},100)
					});
			},
			//授权手机号登录
			decryptPhoneNumber(e) {
				console.log(e, 3333333333333)
				var that = this
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					if (e.detail) {

						that.$u.api.getPhoneNumber({
								appid: 'wxc3c74c17168f844a',
								code: e.detail.code
							})
							.then((res) => {
								console.log(res,32111111);
								that.tell = res.tell
								that.login()
							});


					} else {
						// 授权失败请使用验证码登录
						uni.showToast({
							title: '请使用手机号登录',
							icon: 'none'
						});
					}
				}
				// #endif
			},

		},

	}
</script>

<style scoped lang="scss">
	
	/deep/ .u-checkbox__label{
		margin: 0 0 0 10rpx !important;
		font-size: 13px !important;
	}
	.botTips{
		text-align: center;
		padding: 15px 0;
		color: #999;
		text-decoration: underline;
		
	}
	.btns {
		position: relative;
		width: 608rpx;
		height: 104rpx;
		display: block;
		margin: 0 auto;
	}

	.img22 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 608rpx;
		height: 104rpx;
		background: linear-gradient(180deg, #0C5CFF 0%, #84ACFF 100%);
		box-shadow: 0rpx 8rpx 9rpx 0rpx rgba(41,88,255,0.23);
		border-radius: 76rpx 76rpx 76rpx 76rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 42rpx;
			text-shadow: 0px 6px 5px rgba(0,29,183,0.2);
			background: linear-gradient(180deg, #FFFFFF 0%, #C2E2FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.handles /deep/ button::after {
		border: none !important;
	}

	.handles /deep/ button {
		position: relative;
		z-index: 8;
		opacity: 0;
		width: 608rpx;
		height: 104rpx;
		display: block;
		margin: 0 auto;
		// border-radius: 50%;
		background-color: transparent !important;
	}

	.decoration {
		width: 100%;
		height: 35rpx;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 88;


	}

	.foot {
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 120rpx;
		left: 72rpx;
		font-size: 27rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;

		text {
			color: #1B6BE3;
		}

		.img3 {
			width: 44rpx;
			height: 44rpx;
			margin-right: 16rpx;
		}
	}


	.imgs {
		width: 100%;
		height: 35rpx;
	}

	.tit {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		text-align: center;
	}

	.desc {
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		padding: 37rpx 84rpx 125rpx 101rpx;
	}

	.img2 {
		
		margin: 0 auto;
		width: 608rpx;
		height: 104rpx;
		background: linear-gradient(180deg, #0C5CFF 0%, #84ACFF 100%);
		box-shadow: 0rpx 8rpx 9rpx 0rpx rgba(41,88,255,0.23);
		border-radius: 76rpx 76rpx 76rpx 76rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			// line-height: 42rpx;
			text-shadow: 0px 6px 5px rgba(0,29,183,0.2);
			background: linear-gradient(180deg, #FFFFFF 0%, #C2E2FF 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.near {

		padding-bottom: 30rpx;
		// background: url("https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/c1.png") no-repeat;
		// background-size: 750rpx 189rpx;
	}


	.tips {

		margin: 50px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #999999;

		text {
			color: #7F76FF;
		}
	}

	.back {
		width: 30rpx;
		height: 46rpx;
		margin-left: 40rpx;
	}

	.bottoms {
		padding: 20rpx 0 0;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		.left {
			padding-top: 20rpx;
			font-size: 25rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 29rpx;

			text {
				font-size: 33rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #3B70FF;
				padding: 0 10rpx;
			}
		}

		.right {
			margin-right: -5px;

			.img1 {
				width: 178rpx;
				height: 82rpx;
			}
		}
	}

	.content {

		position: relative;



		.img1 {
			display: block;
			width: 403rpx;
			height: 373rpx;
			margin: 170rpx auto 0;
		}
	}
</style>
